<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<script>
		$(function(){
										
			var $smallImg = $("#smallImg");//小图
			var $bigImg = $("#bigImg")//大图
			var $smallCursor = $("#smallCursor");//小放大镜
			var $bigCursor = $("#bigCursor");//大放大镜
			
			$smallCursor.width( $bigCursor.width()/$bigImg.width()*$smallImg.width() );
			$smallCursor.height($bigCursor.height()/$bigImg.height()*$smallImg.height());
			
			var rate = $bigCursor.width()/$smallCursor.width();
			$smallImg.hover(
				function(){
					$smallCursor.show();
				},
				function(){
					$smallCursor.hide();
				}
			);
			$smallImg.on("mousemove", function(event){
				var mouseX = event.clientX;
				var mouseY = event.clientY;
				var _left = mouseX - $smallCursor.width()/2 - $smallImg.offset().left;
				var _top = mouseY - $smallCursor.height()/2 - $smallImg.offset().top;
				_left = _left < 0 ? 0 : ( _left> ($smallImg.width()-$smallCursor.width() ) ? $smallImg.width()-$smallCursor.width() : _left ); 
				_top = _top < 0 ? 0 : (_top > ($smallImg.height()-$smallCursor.height()) ? $smallImg.height()-$smallCursor.height() : _top);
				$smallCursor.css("left", _left);
				$smallCursor.css("top", _top);
				$bigImg.css("left", -_left*rate);
				$bigImg.css("top", -_top*rate);
				
			})
		});
	</script> 
	<body>
		<div id="smallImg" style="position: absolute; background:url(img/星际穿越.jpg) center; background-size: cover; top: 100px; left:100px; width:200px; height:200px;">
			<div id="smallCursor" style="position: absolute; left: 0; top: 0; display:none; width: 40px; height: 40px; background: rgba(200,198,255,0.8);"></div>
		</div>
		<div id="bigCursor" style="position: absolute; height:300px; width:300px; left: 350px; top: 10px; background: rgba(200,198,255,0.1); overflow: hidden;">
			<img id="bigImg" style="position: absolute; left: 0px; top: 0px;" src="img/星际穿越.jpg"/>
		</div>
	</body>

</html>